<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
    <link rel="stylesheet" href="./styles/wangEditor.min.css">
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            min-height: 600px;
        }
    </style>
</head>
<body>
    <div id="editor">
        <p>欢迎使用富文本编辑器</p>
    </div>

    <button id="btn1">获取html</button>
	<button id="btn2">获取text</button>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="./js/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor;
        var editor = new E('#editor');
        // 或者 var editor = new E( document.getElementById('editor') )

		// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
    	 editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
     	//editor.customConfig.uploadImgServer = '/upload';  // 上传图片到服务器

		// 将图片大小限制为 3M
		editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;

		// 限制一次最多上传 5 张图片
		editor.customConfig.uploadImgMaxLength = 5;

		document.getElementById('btn1').addEventListener('click', function () {
			// 读取 html
			alert(editor.txt.html());
		}, false);

		document.getElementById('btn2').addEventListener('click', function () {
			// 读取 text
			alert(editor.txt.text());
		}, false);


        editor.create();
    </script>
</body>
</html>
